<template>
    <div>
      <div class="Editor-Demo">
        <div class="Editor-header">
          <div class="Editor-title">可视化编辑器</div>
          <div class="Editor-view-mode-group-container">
            <div class="Editor-view-mode-group">
              <div
                :class="'Editor-view-mode-btn '+(!mobileModel ? 'is-active' : '')" @click="handleMobileChange(false)"         >
                <!-- <amis-icon icon="pc-preview" title="PC模式" /> -->
                <svg-icon icon-class="pc-preview" title="PC模式"/>
              </div>
              <div
                :class="'Editor-view-mode-btn '+(mobileModel ? 'is-active' : '')" @click="handleMobileChange(true)"    >
                <svg-icon   icon-class="h5-preview" title="移动模式"  />
              </div>
            </div>
          </div>

          <div class="Editor-header-actions">
            <amis-shortcut-key />
            <div    :class="'header-action-btn margin-left-space '+( previewModel ? 'primary' : '')"     @click= "togglePreview"        >
              {{previewModel ? '编辑' : '预览'}}
            </div>
          </div>
        </div>
        <div class="Editor-inner">
          <amis-editor
        id="editorName"
        :theme="theme"
        :className="className"
        :preview="previewModel"
        :isMobile="mobileModel"
        @onChange="onChange"
        @onPreview="onPreview"
        @onSave="onSave"
        :value="schema"
        :plugins="plugins"
        :showCustomRenderersPanel="showCustomRenderersPanel"
      />
        </div>
      </div>
      
     
    </div>
  </template>
  <script>
  
  var { Editor,ShortcutKey } = require("amis-editor");  
  import { ReactInVue } from "vuera";
  import './style.scss'; // demo样式文件
  require('amis-editor-core/lib/style.css');
  import SvgIcon from "../components/SvgIcon.vue"
  var { registerAmisEditorPlugin } = require("@colys/amis-widget")  
  
  /*注册组件 */
  import InfoCardPlugin from "./plugins/InfoCardPlugin.js"
  registerAmisEditorPlugin(InfoCardPlugin);


  export default {
    
    components: {
      AmisEditor: ReactInVue(Editor),
      AmisShortcutKey: ReactInVue(ShortcutKey),
      // AmisIcon:ReactInVue(Icon),
       SvgIcon

    },
    props: {
      isPreview: {
        type: Boolean,
        default: false,
      },
      isMobile: {
        type: Boolean,
        default: false,
      },
      showCustomRenderersPanel: {
        type: Boolean,
        default: false,
      },
      theme: {
        type: String,
        default: "cxd",
      },
      className: {
        type: String,
        default: "ang",
      },
      value: {
        type: Object,
        default: () => {},
      },
      plugins: {
        type: Array,
        default: () => [
          
        ],
      },
    },
    data() {
      return {
        previewModel:false,
        mobileModel:false,
        schema: {},
      };
    },
    created(){
      // registerIcon('pc-preview', PCPreview);
      // registerIcon('h5-preview', H5Preview);
    },
    watch: {
      isPreview(val){
        this.previewModel=val;
      },
      isMobile(val){
        this.mobileModel=val;
      }
    },
    mounted() {
      
      this.schema = this.value;
    },
    methods: {
      setSchema(obj) {
        this.schema = obj;
      },
      getSchema() {
        return this.schema;
      },
      onChange(e) {
        this.schema = e;
        this.$emit("change", e);
      },
      onSave(e) {
        console.log(e);
        this.$emit("onSave", e);
      },
      onPreview(e) {
        console.log(e);
        this.$emit("onPreview", e);
      },
      togglePreview  ()  {
      this.handlePreviewChange(!this.previewModel);
    },

    handleMobileChange ( isMobile){
      localStorage.setItem('editting_preview_mobile', isMobile ? 'true' : '');
      this.mobileModel = isMobile;
    },
    handlePreviewChange ( preview ){
      localStorage.setItem('editting_preview', preview ? 'true' : ''); 
      this.previewModel=preview ;
    }

    },
  };
  </script>
  